<!-- 个人信息页面 -->
<template>
  <div>
    <van-nav-bar fixed placeholder title="登记" left-arrow @click-left="onClickLeft" />
    <div class="person-info">
      <div class="info">
        个人信息
      </div>
      <div class="form">
        <div>
          <drop-Down :columns="columns" :value="personForm.nation" :required="true" :label-name="'民族'" @changeValue="changeValue" />
        </div>
        <div class="moreSty">
          <van-field v-model="personForm.nativePlace" class="basicClass" label="籍贯" required placeholder-style="color:#999;" placeholder="请输入籍贯" autosize type="textarea" @change="personForm.nativePlace = $event.detail" />
        </div>
        <div class="moreSty">
          <van-field v-model="personForm.height" class="basicClass" label="身高" placeholder-style="color:#999;" placeholder="请输入身高" type="input" @change="personForm.height = $event.detail" />
        </div>
        <div class="moreSty">
          <van-field v-model="personForm.weight" class="basicClass" label="体重" placeholder-style="color:#999;" placeholder="请输入体重" type="input" @change="personForm.weight = $event.detail" />
        </div>
        <div class="moreSty">
          <van-field v-model="personForm.healthCondition" class="basicClass" label="健康状况" required placeholder-style="color:#999;" placeholder="请输入健康状况" autosize type="textarea" @change="personForm.healthCondition = $event.detail" />
        </div>
        <div class="moreSty">
          <van-field v-model="personForm.bloodType" class="basicClass" label="血型" placeholder-style="color:#999;" placeholder="请输入血型" type="input" @change="personForm.bloodType = $event.detail" />
        </div>
        <div>
          <drop-Down :columns="maritals" :required="true" :value="maritalStatus" :label-name="'婚否'" @changeValue="changeValue" />
        </div>
        <div class="moreSty">
          <van-field v-model="personForm.homeNumber" class="basicClass" label="住宅电话" placeholder-style="color:#999;" placeholder="请输入住宅电话" type="tel" @blur="onBlur" @change="personForm.homeNumber = $event.detail" />
        </div>
        <div>
          <drop-Down :columns="driveLicenses" :value="driverLicense" :label-name="'有无驾照'" @changeValue="changeValue" />
        </div>
        <div class="moreSty">
          <van-field v-model="personForm.hobby" class="basicClass" label="爱好特长" placeholder-style="color:#999;" placeholder="请输入爱好特长" autosize type="textarea" @change="personForm.hobby = $event.detail" />
        </div>
        <div class="moreSty">
          <van-field v-model="personForm.email" class="basicClass" label="电子邮箱" placeholder-style="color:#999;" placeholder="请输入电子邮箱" type="input" @change="personForm.email = $event.detail" />
        </div>
        <div class="moreSty specialSty">
          <van-field v-model="personForm.emergencyContact" class="basicClass" label="紧急联系人姓名/电话" placeholder-style="color:#999;" placeholder="请输入紧急联系人姓名/电话" autosize type="textarea" @change="personForm.emergencyContact = $event.detail" />
        </div>
      </div>
      <div class="infoBtn">
        <van-button size="large" :class="showSubmit?'submit':'noSubmit'" round @click="submitPerson">
          提交并保存
        </van-button>
      </div>
    </div>
    <van-toast id="van-toast" />
  </div>
</template>

<script>
import dropDown from '../drop-down.vue'
import { checkMobile } from '../../../../utils/rule'
import Toast from '@/wxcomponents/vant/toast/toast'

export default {
  components: { dropDown },
  data() {
    return {
      showSubmit: false,
      personForm: {
        nation: '',
        nativePlace: '',
        height: '',
        weight: '',
        healthCondition: '',
        bloodType: '',
        maritalStatus: '',
        homeNumber: '',
        driverLicense: '',
        hobby: '',
        email: '',
        emergencyContact: '',
      },
      // 民族
      showPicker: false,
      // 民族list
      columns: ['汉族', '其他'],
      // 婚否
      showMarital: false,
      // 婚否list
      maritals: ['是', '否'],
      // 是否有驾照
      driveLicenses: ['是', '否'],
      showDrive: false,
      maritalStatus: '',
      driverLicense: '',
    }
  },
  onLoad() {
    const person = uni.getStorageSync('person')
    if (person) {
      this.personForm = person
      if (person.maritalStatus === 0) {
        this.maritalStatus = '否'
      } else {
        this.maritalStatus = '是'
      }
      if (person.driverLicense === 0) {
        this.driverLicense = '否'
      } else {
        this.driverLicense = '是'
      }
      if (person.isPersonOk) {
        this.showSubmit = true
      }
    }
  },
  methods: {
    // 电话号码失去焦点
    onBlur(val) {
      const number = checkMobile(val.detail.value)
      if (!number) {
        this.personForm.homeNumber = ''
      }
    },
    // 选择值
    changeValue(val) {
      switch (val.name) {
        case '民族':
          this.personForm.nation = val.value
          break
        case '婚否':
          this.showSubmit = true
          if (val.value === '是') {
            this.maritalStatus = '是'
            this.personForm.maritalStatus = 1
          } else {
            this.maritalStatus = '否'
            this.personForm.maritalStatus = 0
          }
          break
        case '有无驾照':
          if (val.value === '是') {
            this.driverLicense = '是'
            this.personForm.driverLicense = 1
          } else {
            this.driverLicense = '否'
            this.personForm.driverLicense = 0
          }
          break
      }
    },
    // 返回上一页
    onClickLeft() {
      uni.navigateBack()
    },
    submitPerson() {
      if (this.personForm.nation === '' || this.personForm.nation.trim().length === 0) {
        Toast('请填写民族')
        return
      }
      if (this.personForm.nativePlace === '' || this.personForm.nativePlace.trim().length === 0) {
        Toast('请填写籍贯')
        return
      }
      if (this.personForm.healthCondition === '' || this.personForm.healthCondition.trim().length === 0) {
        Toast('请填写健康状况')
        return
      }
      if (this.maritalStatus === '' || this.maritalStatus.trim().length === 0) {
        Toast('请选择婚否')
        return
      }

      this.personForm.isPersonOk = true
      uni.setStorageSync('person', this.personForm)
      uni.navigateBack()
      // {
      //   url: '/package-guest/pages/info-regist/info-write/index',
      // }
    },
  },
}
</script>
<style lang="scss" scoped>
.person-info{
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  .info{
      width: 90%;
      padding: 0px 0px 0px 10px;
      margin: 15px 0px;
      color: #000;
      font-size: 16px;
      font-weight: 600;
      border-left: 2px solid #739ECA;
  }
  .form{
    width: 93%;
    margin: 0 auto;
    box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.06);
    border-radius: 2px;
  }
  .infoBtn{
    text-align: center;
    padding-top: 15%;
    padding-bottom: 10%;
    width: 80%;
  }
}
</style>
<style lang="scss">
.moreSty{
  view {
    label{
      width:100%;
      display: flex;
      white-space: nowrap;
    }
    input{
      padding-right: 8px;
      text-align: right;
    }
    textarea{
      padding-right: 8px;
      text-align: right;
    }
  }
  .van-field__body{
    padding-right: 16px;
  }
}
.form{
  .van-cell{
    padding: 10px 5px 10px 2px !important;
  }
  .van-cell__title{
    padding-left:16px;
  }
  .van-field__control{
    color:#999 !important;
    font-size: 14px;
  }
  .van-icon:before{
    color:#999;
  }
  .van-field__label{
    color:#333 !important;
    white-space: normal !important;
  }
}
.infoBtn{
  .noSubmit{
    .van-button--round {
      height: 36px;
      width: 75%;
      background: #ccc !important;
      color: #fff !important;
      font-size: 16px !important;
    }
  }
  .submit{
    .van-button--round {
      height: 36px;
      width: 75%;
      background: #029b00!important;
      color: #fff !important;
      font-size: 16px !important;
    }
  }
}
</style>
